<template>
  <div class="message">
    <p><strong>楼市观天下</strong></p>
    <div class="tt-message">
      <input type="text" id="soushou" placeholder="搜索" v-model="search" />
      <button class="btn" @click="btn">搜索</button>
      <div class="td-mess" v-for="(list, index) in searchData" :key="index">
        <img :src="list.portrait" alt="" />
        <ul>
          <li>{{ list.name }}</li>
          <li>{{ list.methods }}</li>
        </ul>
        <span>{{ list.date }}</span>
      </div>
      <router-view />
      <ul>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      search: "",
      searchData: "",
      products: [],
      isShow: false,
    };
  },
  methods: {
    btn: function () {
      if (this.search == "") {
        this.isShow = false;
        return;
      } else {
        this.isShow = true;
        var search = this.search;
        if (search) {
          this.searchData = this.products.filter(function (product) {
            console.log(product);
            return Object.keys(product).some(function (key) {
              console.log(key);
              return String(product[key]).toLowerCase().indexOf(search) > -1;
            });
          });
        }
      }
    },
    getData() {
      let url = "/data/message.json";
      let pro = axios.get(url);
      pro.then((res) => {
        // console.log(res);
        this.products = res.data.result;
        // console.log(this.arr);
      });
      pro.catch((erro) => {});
    },
    onChange(index) {
      this.current = index;
    },
    // 获取内容
    getList() {
      axios
        .get("https://apis.netstart.cn/zhihudaily/stories/latest")
        .then((res) => {
          console.log(res);
        });
    },
  },
  mounted() {
    this.getData();
    //  console.log(this.iscollet);
  },
  created() {
    //调用axios
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.message {
  width: 100%;
  font-size: 16px;
  p {
    line-height: 30px;
    height: 30px;
    margin: 0;
    padding-bottom: 5px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgb(216, 211, 211);
  }
  #soushou {
    width: 95%;
    margin-left: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    height: 30px;
  }
  .tt-message {
    width: 95%;
    height: 600px;
    // text-align: center;
    // line-height: 600px;
    // color: gray;
    margin-left: 10px;
    margin-top: 5px;
    position: relative;
    .btn {
      position: absolute;
      right: 10px;
      top: 2px;
      height: 30px;
      border: 0;
      border-radius: 10px;
    }
    .td-mess {
      padding: 5px;
      // margin-top: 1px;
      background-color: #f7f2f2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        color: gray;
        font-size: 12px;
      }
      img {
        width: 50px;
      }
      li {
        margin-top: 5px;
        margin-left: -90px;
        text-align: left;
        width: 150px;
      }
      li:nth-child(2) {
        color: gray;
        font-size: 14px;
      }
    }
  }
  .mask {
    display: flex;
    img {
      width: 50px;
    }
    li {
      margin-top: 5px;
      margin-left: 10px;
      text-align: left;
      // width: 150px;
      height: 35px;
      text-align: center;
      line-height: 35px;
    }
    li:nth-child(2) {
      background-color: gray;
      color: white;
      font-size: 14px;
    }
  }
}
</style>